<template>
    <el-drawer v-model="visible" size="40%" :title="titleMap[mode]" direction="rtl" destroy-on-close>
        <el-main style="padding:0 20px;">
            <el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="right">
                <el-form-item label="优惠劵名称" prop="title">
                    <el-input v-model="form.title" clearable></el-input>
                </el-form-item>
                <el-form-item label="关联活动" prop="activity_id">
                    <sc-table-select v-model="activityApi.data" :apiObj="activityApi.obj" :params="activityApi.params"
                        :table-width="600" :props="activityApi.props" clearable placeholder="选择活动" @change="activityChange">
                        <template #header="{ form, submit }">
                            <el-form :inline="true" :model="form">
                                <el-form-item>
                                    <el-input v-model="form.keyword" clearable placeholder="活动名称" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submit">查询</el-button>
                                </el-form-item>
                            </el-form>
                        </template>
                        <el-table-column prop="name" label="活动名称" width="250"></el-table-column>
                        <el-table-column label="开始时间" prop="start_time" width="150"></el-table-column>
                        <el-table-column label="结束时间" prop="end_time" width="150"></el-table-column>
                    </sc-table-select>
                </el-form-item>
                <el-form-item label="有效天数" prop="valid_days">
                    <el-input-number v-model="form.valid_days" :min="1" :max="365" />
                </el-form-item>
                <el-form-item label="优惠金额" prop="amount">
                    <el-input-number v-model="form.amount" :min="0.01" :max="99999" :precision="2" />
                </el-form-item>
            </el-form>

        </el-main>
        <template #footer>
            <el-button @click="$emit('closed')">取 消</el-button>
            <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>
    </el-drawer>
</template>

<script>

export default {
    emits: ['success', 'closed'],
    comments: {

    },
    data () {
        return {
            visible: false,
            mode: "add",
            titleMap: {
                add: '新增优惠劵',
                edit: '编辑优惠劵',
            },
            isSaveing: false,
            activityApi: {
                data: '',
                obj: this.$API.app.activity.list,
                params: {
                    // status: 1
                },
                props: {
                    label: 'name',
                    value: 'id',
                    keyword: "keyword"
                }
            },
            //表单数据
            form: {
                title: "",
                activity_id: null,
                valid_days: 1,
                amount: 0.01,
            },
            //验证规则
            rules: {
                title: [
                    { required: true, message: '优惠劵名称', trigger: 'change' }
                ],
                activity_id: [
                    { required: true, message: '请选择关联活动', trigger: 'change' }
                ],
                valid_days: [
                    { required: true, message: '请输入优惠劵有效天数' }
                ],
                amount: [
                    { required: true, message: '请输入优惠劵金额' }
                ],
            }
        }
    },
    mounted () {

    },
    methods: {
        //显示
        open (mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        activityChange (e) {
            this.form.activity_id = e.id
        },
        //表单提交方法
        submit () {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    await this.$API.app.coupon.save.post(this.form)
                        .then(res => {
                            this.isSaveing = false;
                            if (res.code == 200) {
                                this.$emit('success')
                                this.visible = false
                                this.$message.success("操作成功")
                            } else {
                                this.$alert(res.message, "提示", { type: 'error' })
                            }
                        })
                        .catch(() => {
                            this.isSaveing = false;
                        });

                }
            })
        },
        //表单注入数据
        setData (data) {
            Object.assign(this.form, data)
        }
    }
}
</script>

<style></style>
